import React, { useState } from "react";
import { Button } from "antd";
import "./Demo.less";
import { useCallback } from "react";

// 子组件
// class Child extends React.PureComponent {
//   render() {
//     console.log("Child Render");
//     return <div>我是子组件</div>;
//   }
// }

const Child = React.memo(function Child() {
  console.log("Child Render");
  return <div>我是子组件</div>;
});

// 父组件
// 述求：当父组件更新的时候，因为传递给子组件的属性仅仅是一个函数 特点：基本应该算是不变的，所以不想让子组件也跟这更新
//  + 第一条：传递给子组件的属性（函数），每一次要是相同的堆内存地址（是一致的），基于useCallback处理
//  + 第二条：在子组件内部也要做一个处理，验证父组件传递的属性是否发生改变，如果没有发生改变，则子组件不能更新，有变化才更新，
//  如果子组件是类的话，可以继承PureComponent，他里面做了shouldComponentUpdate的浅层比较，如果是函数组件,你可以通过memo返回一个新的
// react组件，只要是props或则自身的state发生改变，就不会发生改变
// 在react中有三种情况会导致组件重新刷新
const Demo = function () {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const handle = useCallback(() => {}, [x]);
  return (
    <div className="vote-box">
      <div className="main">
        <p>{x}</p>
        <Child handle={handle} />
      </div>
      <div className="footer">
        <Button
          type="primary"
          onClick={() => {
            setX(x + 1);
          }}
        >
          累加
        </Button>
        <Button
          onClick={() => {
            setY(y + 1);
          }}
        >
          加y
        </Button>
      </div>
    </div>
  );
};

export default Demo;
